﻿@page "/datagrid/group-and-caption-aggregate"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates Aggregate functionality of the DataGrid. In this sample, both Unit In Stock and Discontinued columns displayed their aggregate value in group footer.
                        Unit In Stock column displayed its aggregate value in group caption also.</p> 
</SampleDescription>
<ActionDescription>
   <p>The DataGrid supports aggregates which will be displayed at the footer, group footer, and group caption of the DataGrid. The aggregate configurations can be provided by using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridAggregates.html'>GridAggregates</a></code> component.</p>
    <p>The built-in aggregates are,</p>
    <ul>
        <li><strong>Sum</strong></li>    
        <li><strong>Average</strong></li>    
        <li><strong>Min</strong></li>    
        <li><strong>Max</strong></li>    
        <li><strong>Count</strong></li>    
        <li><strong>TrueCount</strong></li>    
        <li><strong>FalseCount</strong></li>
    </ul>   
    <p>In this demo, the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridAggregateColumn~GroupFooterTemplate.html'>GroupFooterTemplate</a></code> is used for displaying the group footer aggregation for the <strong><i>Unit In Stocks</i></strong> and <strong><i>Discontinued</i></strong> columns and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridAggregateColumn~GroupCaptionTemplate.html'>GroupCaptionTemplate</a></code> is used for displaying the group caption aggregation for the <strong><i>Unit In Stocks</i></strong> column.</p>   
    <p>To enable group footer aggregation for <strong><i>Unit In Stocks</i></strong> column, the <strong>Sum</strong> aggregate type is used by setting it in the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Type.html'>Type</a></code> property and <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Field.html'>Field</a></code> property is set as <strong><i>UnitsInStock</i></strong> which will be used to perform the aggregation. The aggregate value is accessed inside the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridAggregateColumn~GroupFooterTemplate.html'>GroupFooterTemplate</a></code> using its <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Type.html'>Type</a></code> name (<strong>Unit.Sum</strong>) where <b>Unit</b> is an implicit named parameter - <b>Context</b>.</p>
    <p>To enable group caption aggregation for <strong><i>Unit In Stocks</i></strong> column, the <strong>Max</strong> aggregate type is used by setting it in <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Type.html'>Type</a></code> property and the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Field.html'>Field</a></code> property is set as <strong><i>UnitsInStock</i></strong> which will be used to perform the aggregation. The aggregate value is accessed inside the<code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.GridAggregateColumn~GroupCaptionTemplate.html'>GroupCaptionTemplate</a></code> using its <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor~Syncfusion.Blazor.Grids.AggregateColumnModel~Type.html'>Type</a></code> name (<strong>Unit.Max</strong>) where <b>Unit</b> is an implicit named parameter - <b>Context</b>.</p>
    <p>More information on the group caption aggregate can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/aggregates/#group-and-caption-aggregate'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowPaging="true" AllowGrouping="true">
                <GridGroupSettings ShowDropArea="false" Columns=@GroupedColumn></GridGroupSettings>
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridAggregates>
                    <GridAggregate>
                        <GridAggregateColumns>
                            <GridAggregateColumn Field=@nameof(Category.UnitsInStock) Type="AggregateType.Sum">
                                <GroupFooterTemplate>
                                    @{
                                        var Unit = (context as AggregateTemplateContext);
                                        <div>
                                            Total units: @Unit.Sum
                                        </div>
                                    }
                                </GroupFooterTemplate>
                            </GridAggregateColumn>
                            <GridAggregateColumn Field=@nameof(Category.Discontinued) Type="AggregateType.TrueCount">
                                <GroupFooterTemplate>
                                    @{
                                        var Count = (context as AggregateTemplateContext);
                                        <div>
                                            Discontinued: @Count.TrueCount
                                        </div>
                                    }
                                </GroupFooterTemplate>
                            </GridAggregateColumn>
                            <GridAggregateColumn Field=@nameof(Category.UnitsInStock) Type="AggregateType.Max">
                                <GroupCaptionTemplate>
                                    @{
                                        var Maxcount = (context as AggregateTemplateContext);
                                        <div>
                                            Maximum: @Maxcount.Max
                                        </div>
                                    }
                                </GroupCaptionTemplate>
                            </GridAggregateColumn>
                        </GridAggregateColumns>
                    </GridAggregate>
                </GridAggregates>
                <GridColumns>
                    <GridColumn Field=@nameof(Category.CategoryName) HeaderText="Category Name" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(Category.ProductName) HeaderText="Product Name" Width="170"></GridColumn>
                    <GridColumn Field=@nameof(Category.QuantityPerUnit) HeaderText="Quantity Per Unit" TextAlign="TextAlign.Right"  Width="170"></GridColumn>
                    <GridColumn Field=@nameof(Category.UnitsInStock) HeaderText="Units In Stock" Width="170"></GridColumn>
                    <GridColumn Field=@nameof(Category.Discontinued) HeaderText="Discontinued" Width="150" DisplayAsCheckbox=@true Type="ColumnType.Boolean" TextAlign="TextAlign.Center" ></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    private string[] GroupedColumn = new string[] { "CategoryName" };
    
    public List<Category> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = Category.GetAllRecords();
    }
}
